<template>
  <el-row>

    <Title class="MONACO"/>
<!--    <img class="MONACO" src="../../assets/page/title.svg"/>-->

    <img class="HomeIcon" src="../../assets/page/Fill 1.png"/>

    <span class="Home">Home</span>

    <img class="DiscoverIcon" src="../../assets/page/icon-Vector.png"/>

    <span class="Discover">Discover</span>

    <img class="MessageIcon" src="../../assets/page/Vector.png"/>

    <span class="Message">Message</span>

    <img class="MeIcon1" src="../../assets/page/Fill 1 (1).png"/>

    <img class="MeIcon2" src="../../assets/page/Fill 3.png"/>

    <span class="Me">Me</span>

    <el-row class="Recentage2"></el-row>

    <el-row class="Recentage3"></el-row>

    <el-row class="Recentage4"></el-row>

    <button class="Recentage1"></button>

    <span class="Post">Post</span>

    <img class="addIcon" src="../../assets/page/Vector (1).png"/>

    <button class="Button">
    </button>

    <span class="font-Button">Purchase yacht</span>
  </el-row>
</template>

<script>
import Title from "../Icon/Title";
export default {
  name: "Group",
  components:{
    Title
  }
}
</script>

<style>
.MONACO {
  position: absolute;
  width: 144px;
  height: 42px;
  left: 45px;
  top: 25px;
}

.HomeIcon {
  position: absolute;
  width: 23px;
  height: 21px;
  left: 51px;
  top: 105px;

  /*background: #BDA28D;*/
}

.DiscoverIcon {
  position: absolute;
  left: 44px;
  top: 157px;


  /* Inside Auto Layout */

  flex: none;
  order: 0;
  flex-grow: 0;
  margin: 0 10px;
}

.MessageIcon {
  position: absolute;
  width: 19.75px;
  height: 20.36px;
  left: 44px;
  top: 208px;


  /* Inside Auto Layout */

  flex: none;
  order: 0;
  flex-grow: 0;
  margin: 0 10px;
}

.MeIcon1 {

  position: absolute;
  width: 11.22px;
  height: 11.22px;
  left: 58px;
  top: 259px;

  /* Inside Auto Layout */

  flex: none;
  order: 0;
  flex-grow: 0;
  margin: 1px 0;
}

.MeIcon2 {

  position: absolute;
  width: 18.07px;
  height: 8.16px;
  left: 55px;
  top: 271.22px;


  /* Inside Auto Layout */

  flex: none;
  order: 1;
  flex-grow: 0;
  margin: 1px 0;
}

.Home {
  position: absolute;
  width: 42px;
  height: 13px;
  left: 89px;
  top: 111px;

  font-family: Gotham;
  font-style: normal;
  font-weight: 500;
  font-size: 14px;
  line-height: 13px;
  /* identical to box height */

  text-align: center;

  color: #BDA28D;

}

.Discover {
  position: absolute;
  width: 61px;
  height: 13px;
  left: 89px;
  top: 162px;

  font-family: Gotham;
  font-style: normal;
  font-weight: 500;
  font-size: 14px;
  line-height: 13px;
  /* identical to box height */

  text-align: center;

  color: #FFFFFF;
}

.Message {
  position: absolute;
  width: 61px;
  height: 13px;
  left: 89px;
  top: 213px;

  font-family: Gotham;
  font-style: normal;
  font-weight: 500;
  font-size: 14px;
  line-height: 13px;
  /* identical to box height */

  text-align: center;

  color: #BDA28D;
}

.Me{
  /* Me */


  position: absolute;
  width: 21px;
  height: 13px;
  left: 89px;
  top: 264px;

  font-family: Gotham;
  font-style: normal;
  font-weight: 500;
  font-size: 14px;
  line-height: 13px;
  /* identical to box height */

  text-align: center;

  color: #BDA28D;
}

.Recentage1{
  position: absolute;
  width: 148px;
  height: 30px;
  left: 45px;
  top: 314px;

  background: #181818;
  box-shadow: 0 6px 11px #000000;
  border-style: solid;
  border-color: rgba(166, 166, 166, 0.5);
  border-width: 1px;
  border-radius: 8px;
}

.Recentage2{
  position: absolute;
  width: 41.86px;
  height: 30px;
  left: 41px;
  top: 314px;

  background: #65D1E8;
  border-radius: 8px;
}

.Recentage3{
  /* Rectangle */


  position: absolute;
  width: 148px;
  height: 30px;
  left: 49px;
  top: 314px;

  background: #E5436D;
  border-radius: 8px;
}

.Post{
  /* Post */


  position: absolute;
  left: 113px;
  top: 317px;

  font-family: Helvetica;
  font-style: normal;
  font-weight: normal;
  font-size: 16px;
  line-height: 24px;
  /* identical to box height, or 150% */


  /* Secondary/Dust */

  color: #C4C4C4;

}

.addIcon{
  position: absolute;
  width: 18px;
  height: 18px;
  left: 83px;
  top: 320px;
}

.Recentage4{
  /* Rectangle */


  position: absolute;
  width: 148px;
  height: 30px;
  left: 45px;
  top: 314px;

  background: #181818;
  box-shadow: 0 6px 11px #000000;
  border-radius: 8px;
}

.Button{

  /* Auto Layout */

  display: flex;
  flex-direction: row;
  justify-content: center;
  align-items: center;
  padding: 12px 16px;

  position: absolute;
  width: 156px;
  height: 40px;
  left: 41px;
  top: 906px;

  background: rgba(24, 24, 24, 0.2);
  border-color: rgba(189, 162, 141, 1);
  /* dark shadow1 */

  box-shadow: 0 6px 11px #000000;
  z-index: 6;

}

.font-Button{
  position: absolute;
  left: 36px;
  top: 912.5px;

  font-family: Inter;
  font-style: normal;
  font-weight: 600;
  font-size: 16px;
  line-height: 27px;
  /* identical to box height, or 169% */

  text-align: center;
  text-transform: uppercase;

  /* gold */
  z-index: 5;
  color: #BDA28D;


  /* Inside Auto Layout */

  flex: none;
  order: 0;
  flex-grow: 0;
  margin: 0px 8px;
}
</style>